<template>
  <div class="add">
    <div class="additem addleft">
      <div>
        <i class="icon service"></i>
        <span class="text">客服</span>
      </div>
      <div>
        <i class="icon shop"></i>
        <span class="text">店铺</span>
      </div>
      <div>
        <i class="icon select"></i>
        <span class="text">收藏</span>
      </div>
    </div>
    <div class="additem addright">
      <div class="cart" @click="addToCart">加入购物车</div>
      <div class="buy">购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addcart',
  methods: {
    addToCart() {
      this.$emit('addToCart')
    }
  },
}
</script>

<style lang="stylus" scoped>
.add
  position fixed
  display flex
  bottom 0
  right 0
  left 0
  z-index 11
  text-align center
  height 58px
  background-color #fff
  .additem
    flex 1
    display flex
  .addleft
    .text
      font-size: 13px
    .icon
      display: block;
      width: 22px;
      height: 22px;
      margin: 10px auto 3px;
      background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
    .service
      background-position 0 -54px
    .shop
      background-position 0 -98px
    div
      flex 1
  .addright
    font-size 15px
    color #fff
    line-height: 58px
    display flex
    .cart
      background-color #ffe817
      color #333
      padding 0 5px
    .buy
      flex 1
      background-color #f69
</style>